<template>
  <!-- 编辑评语 -->
  <el-dialog
    title="选择学生"
    class="gl_dialog_TitleLine gl_dl_footer card"
    :visible.sync="dialogEditVisible"
    :close-on-click-modal="false"
    width="1024px"
    top="15vh"
  >
    <div class="nav">
      <el-input v-model="Api_GET_ClubFeeRequestFeeRegisterStudentsQO.Filter" class="check" placeholder="请输入姓名" clearable prefix-icon="el-icon-search" @change="gettablelist()" />
    </div>
    <div style="margin-top:15px">
      <el-table ref="multipleTable" v-loading="tableLoading" size="mini" class="gl_table_noBorder table_teach" :row-key="(row)=>{return row.id}" :data="tablelist" @selection-change="selection">
        <el-table-column type="selection" label-class-name="selection" :reserve-selection="true" />
        <el-table-column type="index" label="序号" align="center" width="100" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="证件号码" prop="idCardNumber" />
        <!-- <el-table-column label="手机号码" prop="studentContacts.phoneNumber" /> -->
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubFeeRequestFeeRegisterStudentsQO.Page"
        :page-size="Api_GET_ClubFeeRequestFeeRegisterStudentsQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <!-- 取消按钮 -->
      <el-button size="mini" @click="dialogEditVisible = false">{{ $t('button.cancel') }}</el-button>
      <!-- 编辑的保存按钮 -->
      <el-button size="mini" type="primary" :loading="addfalse" @click="addstudent()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_ClubFeeRequestFeeRegisterStudents } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubFeeRequestFeeRegisterStudentsQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      student: {},
      studentid: [],
      totalPage: 0,
      tablelist: [],
      dialogEditVisible: false,
      tableLoading: false,
      addfalse: false,
      Api_GET_ClubFeeRequestFeeRegisterStudentsQO: new Api_GET_ClubFeeRequestFeeRegisterStudentsQO() // 学员列表
    };
  },
  computed: {
    ...mapState({
      dictRoot: state => state.dict,
      dict: state => state.dict.dict,
      cache: state => state.dict.cache,
      currentUserType: state => state.user.currentUserType,
      info: state => state.user.info,
      tags: state => state.user.tags
    })
  },
  watch: {
    dialogEditVisible: {
      handler() {
        if (this.dialogEditVisible === false) {
          this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO = new Api_GET_ClubFeeRequestFeeRegisterStudentsQO();// 学员列表
          this.studentid = [];
          this.$refs.multipleTable.clearSelection();
          this.gettablelist();
        }
      }
    }
  },
  created() {
    this.getDictByType(['district']);
    this.getDict();
    this.gettablelist();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取列表
    gettablelist(Page) {
      this.tableLoading = true;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.IncludeGender = true;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.ProvinceCode = this.info.currentOrganizationUnit.provinceCode;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.IncludeStudentContacts = true;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.FeeRequestId = this.$route.query.id;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.ExcludeExistedStudents = true;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.Page = Page || 1;
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.SkipCount = (this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.Page - 1) * this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.MaxResultCount;
      console.log(this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO);
      api_GET_ClubFeeRequestFeeRegisterStudents(this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO).then((res) => {
        console.log(res);
        this.totalPage = res.totalCount;
        this.tablelist = res.items;
        this.tableLoading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubFeeRequestFeeRegisterStudentsQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    selection(val) {
      console.log(val);
      this.studentid = [];
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
      } else {
        if (val.length !== 0) {
          // this.studentid = val[0].registerId;
          this.$parent.id = val[0].id;
          this.student = val[0];
        }
      }
    },
    addstudent() {
      this.dialogEditVisible = false;
      console.log(this.student);
      this.$parent.student.name = this.student.name;
      this.$parent.student.idCardTypeCode = this.student.idCardTypeCode;
      this.$parent.getidCardTypeCode(this.student.idCardTypeCode);
      this.$parent.student.idCardNumber = this.student.idCardNumber;
      this.$parent.student.imagePath = this.student.imagePath;
      if (this.student.ctaMemberId) {
        this.$parent.formdata.memberFeeTypeCode = 'Renew';
      }
      this.$parent.student.ctaMemberId = this.student.ctaMemberId;
      this.$parent.student.ctaMemberExipry = this.student.ctaMemberExipry;
      if (this.student.studentContacts[0]) {
        this.$parent.student.phoneNumber = this.student.studentContacts[0].phoneNumber;
      }
    }
  }
};
</script>

<style scoped>
.nav{
  display: flex;
  justify-content: center;
}
.check{
  margin-top:14px;
  margin-bottom:16px;
  overflow:hidden;
  width: 90%;
  margin: 0 auto;
}
 .check .el-input__inner {
  border-radius: 20px;
}
</style>
